<template>
  <div class="globalSettings">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>全局设置</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 表单 -->
    <br />
    <el-card shadow="never">
      <el-form label-width="100px">
        <el-form-item label="应用名称:">
          <el-input v-model="fromData.appName"></el-input>
        </el-form-item>
      </el-form>
      <el-form label-width="100px">
        <el-form-item label="数据API地址:">
          <el-input v-model="fromData.apiUrl"></el-input>
        </el-form-item>
      </el-form>
      <el-form label-width="100px">
        <el-form-item label="管理后台地址:">
          <el-input v-model="fromData.adminUrl"></el-input>
        </el-form-item>
      </el-form>
      <el-form label-width="100px">
        <el-form-item label="客户APP地址:">
          <el-input v-model="fromData.appUrl"></el-input>
        </el-form-item>
      </el-form>
      <!-- <el-form label-width="100px">
        <el-form-item label="ICP备案号">
          <el-input v-model="fromData.icp"></el-input>
        </el-form-item>
      </el-form> -->
      <el-form label-width="100px">
        <el-form-item label="版权声明:">
          <el-input v-model="fromData.copyright" :disabled="true"></el-input>
        </el-form-item>
      </el-form>
      <!-- 提交 -->
      <el-form label-width="100px">
        <el-form-item>
          <el-button @click="checke" type="primary">提交</el-button>
          <el-button @click="close" type="primary">取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //用于提交给服务器的表单对象
      fromData: {},
    };
  },
  methods: {
    checke() {
      //传参
      let data = this.fromData;
      //点击选中向服务器发送请求 更新配置项  拼接 url
      let url = this.$store.state.globalSettings.apiUrl + "/settings";
      this.axios
        .put(url, data)
        .then((res) => {
          console.log(res.data, "异步执行1");
        })
        .then(() => {
          //异步请求整个网站的全局设置并且保存到vueX中
          //获取url
          let url = this.$store.state.globalSettings.apiUrl + "/settings";
          this.axios.get(url).then((res) => {
            console.log(res.data, "异步执行2");
            //存入vuex
            this.$store.commit("setGlobalSettings", res.data);
            console.log(this.$store.state.globalSettings, "vuex被修改后的全局配置信息");
            //浅克隆重置
            this.cloneS();
            //修改完成提示
            this.$message.success("修改成功！");
          });
        });
    },
    //点击取消 恢复原始配置
    close() {
      alert("已重置..");
      //恢复上一次的状态
      this.cloneS();
    },
    //封装一个浅克隆当前全局配置的方法
    cloneS() {
      // let newData={...this.$store.state.globalSettings}; //浅克隆再将新对象的地址值 赋值给fromData
      // this.fromData = newData;

      // 也可以使用JSON.stringify 将对象先转为JSON字符串 再 JSON.parse 转回对象改变地址 实现深克隆
      this.fromData = JSON.parse(JSON.stringify(this.$store.state.globalSettings));
      console.log("-浅克隆重置-");
    },
  },
  mounted() {
    //将服务器端保存的配置信息自动设置给当前data
    console.log("mounted...");
    // this.fromData = this.$store.state.globalSettings; //此处不能直接这么写   this.fromData的地址指向vuex的变量地址 而不是值指向
    this.cloneS(); //浅克隆调用
  },
};
</script>

<style lang="scss"></style>
